<template>
  <el-container>
    <!-- 搜索框 -->
    <el-aside class="searchBox">
      <el-input
          class="w-50 m-2"
          size="large"
          placeholder="请输入作者笔名"
          v-model="bookList.name"
          v-on:keyup.enter="getBookList()"
      />
    </el-aside>
    <el-button type="primary" plain size="large" class="search" @click="getBookList()">查询</el-button>
  </el-container>

  <!-- 数据列表 -->

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="bookName" label="书名" width="120" />
    <el-table-column prop="authorName" label="作者" width="120" />
    <el-table-column prop="score" label="评分" />
    <el-table-column prop="bookStatus" label="书籍状态" />
    <el-table-column prop="visitCount" label="点击量" />
    <el-table-column prop="wordCount" label="总字数" />
    <el-table-column prop="lastChapterName" label="最新章节" />
    <el-table-column prop="lastChapterUpdateTime" label="最近更新时间" />


    <!-- 功能按钮 -->
    <el-table-column label="操作" #default="scope">
      <el-row class="mb-4">
        <el-button type="success" plain @click="deleteBookHandle(scope.row.id)">删除</el-button>
      </el-row>
    </el-table-column>
  </el-table>

  <!-- 分页工具条 -->
  <div class="page">
    <el-pagination
        class="mt-4"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        v-model:total="total"
        :hide-on-single-page="true"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<script setup>
import "@/assets/styles/book.css";
import { onMounted, onUpdated, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {deleteBookById, getBookLists} from "@/api/backend";
import {ElMessage} from "element-plus";

const route = useRoute();

// 总条数
const total = ref(300)
// 当前页
const currentPage = ref(1);
// 每页显示条目数
const pageSize = ref(10);
const bookList = ref({
  // 搜索框绑定数据模型
  name: "",
  pageNum: 1,
  pageSize: 10,
  categoryId: route.params.categoryId
});

// 列表数据
const tableData = ref([{
  id: 1,
  bookName: "书名",
  authorName: "作者",
  score: "评分",
  bookStatus: "书籍状态",
  visitCount: "点击量",
  wordCount: "总字数",
  lastChapterName: "最新章节",
  lastChapterUpdateTime: "最近更新时间"
}]);


const id = ref(route.params.categoryId)

onUpdated(() => {
  id.value = route.params.categoryId;
  // console.log(id.value);
})
watch(id, () => {
  bookList.value.categoryId = id.value;
  bookList.value.pageSize = 10;
  // console.log(bookList.value.categoryId)
  getBookList(bookList);
});

onMounted(() => {
  getBookList()
});

const getBookList = async () => {

  const {data} = await getBookLists(bookList.value);
  console.log(data.list.total);

  tableData.value = data.list;
  currentPage.value = parseInt(data.pageNum);
  pageSize.value = parseInt(data.pageSize);
  total.value = parseInt(data.total);
}

// 每页显示行数
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  bookList.value.pageSize = val;
  getBookList()
}

// 当前页
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  bookList.value.pageNum = val;
  getBookList()
}

// 删除小说
const deleteBookHandle = async (id) => {
  // console.log(id);
  const success = await deleteBookById(id);
  if (success.ok) {
    ElMessage.success("删除成功");
    getBookList();
  } else {
    ElMessage.error("删除失败");
  }
}


</script>

<style scoped lang="scss">
.searchBox {
  width: 300px;
  height: 60px;
  line-height: 50px;
  padding: 5px;
}
.search {
  margin: 10px;
}
.searchButton {
  width: 200px;
  height: 60px;
  line-height: 60px;
  //text-align: right;
  padding: 0;
  position: absolute;
  right: 5px;
}
.el-pagination {
  justify-content: center;
}
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background-color: lightblue !important;
}
.el-pagination {
  --el-pagination-hover-color: lightblue !important;
}
</style>